<template>
	<view class="ikz-bid">
    <ikz-loading  :css-data="loading_css"></ikz-loading>
    <!-- ad -->
    <!-- list -->
    <view>
      <view class="ikz-sticky-box" id="ikz-sticky-box">
        <view class="ikz-sticky-title" v-for="(item,index) in type_list.list" :key="index"><text class="ikz-textcenter"
            :style="current == index ? 'font-weight: 800;color: #FDAF66;border-bottom:6rpx solid #FDAF66;':''"
            @click="change" :data-index="index" :data-id="item.id">{{item.server_name}}</text></view>
      </view>
      <view class="ikz-box">
        <view class="ikz-sticky-item" v-for="(item,index) in show_info.list" :key="index" @click="godetail(item.id)">
          <view class="ikz-sticky-top">
            <view class="ikz-sticky-head">
              <image class="ikz-sticky-img" :src="item.avatar"></image>
            </view>
            <view class="ikz-sticky-head-right">
              <view class="ikz-sticky-head-right-box">
                <view class="ikz-sticky-head-name">
                  {{item.nickname}}
                </view>
                <view class="ikz-sticky-head-time">
                  {{item.time}}
                </view>
              </view>
              <view class="ikz-sticky-head-right-box">
                <view class="ikz-sticky-head-card">
                  {{item.type_text}}
                </view> 
                <view class="ikz-sticky-head-price">
                  ￥{{item.total_fee}}
                </view>
              </view>
            </view>
          </view>
          <view class="ikz-sticky-content" v-if="item.information">
            {{item.information}}
          </view>
          <view>
            <view class="ikz-sticky-end">
              <view class="ikz-sticky-start" v-if="item.game_platform">
                <view class="ikz-sticky-spot2"></view>
                游戏名称：{{item.game_platform}}
              </view>
            </view>
            <view class="ikz-sticky-end">
              <view class="ikz-sticky-start" v-if="item.game_time">
                <view class="ikz-sticky-spot1"></view>
                游戏时长：{{item.game_time}}
              </view>
            </view>
            <view class="ikz-sticky-end">
              <view class="ikz-sticky-start" v-if="item.receive_limit">
                <view class="ikz-sticky-spot"></view>
                游戏限制：{{item.receive_limit}}
              </view>
            </view>
            <view class="ikz-sticky-end">
              <view class="ikz-sticky-start" v-if="item.expected_delivery_time">
                <view class="ikz-sticky-spot"></view>
                预计交货时间：{{item.expected_delivery_time}}
              </view>
            </view>
            
            <view class="ikz-sticky-end">
              <view class="ikz-sticky-start" v-if="item.lease_duration">
                <view class="ikz-sticky-spot2"></view>
                租借时长：{{item.lease_duration}}
              </view>
            </view>
            <view class="ikz-sticky-end">
              <view class="ikz-sticky-start" v-if="item.hope_arrive">
                <view class="ikz-sticky-spot2"></view>
                期望送达：{{item.hope_arrive}}
              </view>
            </view>
          <!--  <view class="ikz-sticky-start" v-if="item.start">
              <view class="ikz-sticky-spot"></view>
              起点：{{item.start}}
            </view> -->
            <view class="ikz-sticky-end">
              <view class="ikz-sticky-start" v-if="item.destination">
                <view class="ikz-sticky-spot1"></view>
                目的地：{{item.destination}}
              </view>
            </view>
            
            <view class="ikz-sticky-buttom" v-if="item.status == 0">
              <view class="ikz-sticky-btn" @click.stop="pay(item.id,item.total_fee)">
                去支付
              </view>
              <view class="ikz-sticky-btn1" @click.stop='cancel(item.id,index)'>
                取消订单
              </view>
            </view>
            <view class="ikz-sticky-buttom" v-if="item.status == 1">
              <view class="ikz-sticky-btn1" @click.stop='cancel(item.id,index)'>
                取消订单
              </view>
            </view>
            
            <view class="ikz-sticky-buttom" v-if="item.status == 2">
             <view class="ikz-sticky-btn4">
                已接单
              </view>
            </view>
            <view class="ikz-sticky-buttom" v-if="item.status == 3">
             <view class="ikz-sticky-btn3">
                已完成
              </view>
            </view>
            <view class="ikz-sticky-buttom" v-if="item.status == 4">
             <view class="ikz-sticky-btn3">
                已取消
              </view>
            </view>
            <view class="ikz-sticky-buttom" v-if="item.status == 7">
              <view class="ikz-sticky-btn3" >
                 已送达
               </view>
             <view class="ikz-sticky-btn2" @click.stop='confir(item.id,index)'>
                确认收货
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="ikz-more" v-if="load_more == 4">
        ——我也是有底线的——
      </view>
      <view class="ikz-more" v-if="load_more == 5">
        <image class="ikz-empty" src="/static/empty.png"></image>
      </view>
    </view>
    <!-- list -->
	</view>
</template>

<script>
import ikzLoading from '@/pages/Component/Public/Loading/loading.vue';
import ikzGlist from '@/pages/Component/Module/Campus/Public/Order/myorder/index.vue';
var app = getApp();
import ikz from '@/pages/Common/tools.js';
export default {
	components: {
    ikzLoading,
    ikzGlist
	},
	data() {
		return {
      loading_css:{
        display:'flex'
      },
      status:'',
      show_info:{
        list:[]
      },
      type_list:{
        list:[
          {
            id:'',
            server_name: '全部'
          },
          {
            id:'0',
            server_name: '待付款'
          },
          {
            id:'1',
            server_name: '待接单'
          },
          {
            id:'2',
            server_name: '待确认'
          },
          {
            id:'4',
            server_name: '已取消'
          },
          {
            id:'3',
            server_name: '已完成'
          }
        ]
      },
      page:1,
      limit:10,
      load_more:2,
      type_index:'',
      current: 0,
      show_status :2,
    };
	},
  onLoad(options){
    this.status = options.status||'';
    if( this.status == ''){
      this.current = 0;
    }else if( this.status == 0){
      this.current = 1;
    }else if( this.status == 1){
      this.current = 2;
    }else if( this.status == 2){
      this.current = 3;
    }else if( this.status == 3){
      this.current = 5;
    }else if( this.status == 4){
      this.current = 4;
    }
    this.orderList((res)=>{
      this.loading_css.display = 'none';
    });
  },
  onShow(){
    if(this.show_status == 2){
      this.show_status = 3;
    }else{
      this.page = 1;
      this.orderList((res)=>{
        this.loading_css.display = 'none';
      });
    }
  },
  onPullDownRefresh() {
    this.page = 1;
    this.orderList((res)=>{
      uni.stopPullDownRefresh();
    });
  },
  onReachBottom() {
    if(this.load_more == 2){
      this.page++;
      this.load_more = 3;
      this.orderList((res)=>{
      });
    }
  },
	methods: {
		typeFilter(e){
			console.log(e);
			if(e == 1){
				return '帮送'
			}else if(e==2){
				return '帮取'
			}else if(e==3){
				return '帮买'
			}else if(e==4){
				return '超市外卖'
			}else if(e==6){
				return '贴吧'
			}else if(e==10){
				return '帮办'
			}
		},
		//请求页面数据
		orderList(fn) {
			var path = '/xyb/order/index';
			var data = {
				page:this.page,
        limit:this.limit,
        eq_status:this.status
			};
			ikz.post(path, data, res => {
				if (res.data.code) {
          console.log(res);
					var temp_list = res.data.data.data;
					if(this.page != 1){
					  for(var i = 0;i<temp_list.length;i++){
					    this.show_info.list.push(temp_list[i]);
					  }
					}else{
					  this.show_info.list = temp_list;
					}
					if(temp_list.length == this.limit){
					  this.load_more = 2;
					}else{
					  if(this.page == 1){
					    if(temp_list.length == 0){
					      this.load_more = 5;
					    }else {
					      this.load_more = 4;
					    }
					  }else{
					    this.load_more = 4;
					  }
					}
					this.$forceUpdate();
				} else {
					uni.showModal({
						title: '提示',
						content: res.data.msg,
						showCancel: false,
						success: function(res) {}
					});
				}
        fn();
			});
		},
    godetail(id){
      uni.navigateTo({
       url:'/pages/Component/Module/Campus/Program/Order/myorderdetail/index?id='+id 
      })
    },
    change: function(e) {
      this.current = e.currentTarget.dataset.index;
      this.status =e.currentTarget.dataset.id;
      this.page = 1;
      this.orderList((res)=>{
        
      });
    },
    pay(id,total_fee){
      uni.navigateTo({
        url: '/pages/Component/Module/Payment/Program/pay/index/index?orderid=' + id +
          '&total_price=' + total_fee
      })
    },
    cancel(id,index){
      var that = this;
      uni.showModal({
          title: '提示',
          content: '确定取消订单？',
          success: function (res) {
              if (res.confirm) {
                var path = '/xyb/order/cancel';
                var data = {
                	orderid:id
                };
                ikz.post(path, data, res => {
                	if (res.data.code) {
                    uni.showToast({
                        title: '取消成功',
                        duration: 2000
                    });
                    that.show_info.list[index].status = 4;
                    if(that.show_info.list.length == 0){
                      that.load_more = 5;
                    }
                		that.$forceUpdate();
                	} else {
                		uni.showModal({
                			title: '提示',
                			content: res.data.msg,
                			showCancel: false,
                			success: function(res) {}
                		});
                	}
                });
              } else if (res.cancel) {
                  console.log('用户点击取消');
              }
          } 
      });
     
    },
    confirmconfirm(id,index){
      var that = this;
      uni.showModal({
          title: '提示',
          content: '确定订单已收货？',
          success: function (res) {
              if (res.confirm) {
                var path = '/xyb/order/confirm_complete';
                var data = {
                	orderid:id
                };
				uni.showLoading({
					title: "加载中"
				})
                ikz.post(path, data, res => {
					uni.hideLoading()
                	if (res.data.code) {
                    uni.showToast({
                        title: '收货成功',
                        duration: 2000
                    });
                    that.show_info.list[index].status = 3;
                    if(that.show_info.list.length == 0){
                      that.load_more = 5;
                    }
                		that.$forceUpdate();
                	} else {
                		uni.showModal({
                			title: '提示',
                			content: res.data.msg,
                			showCancel: false,
                			success: function(res) {}
                		});
                	}
                });
              } else if (res.cancel) {
                  console.log('用户点击取消');
              }
          }
      });
    },
	}
};
</script>

<style scoped>

 .ikz-sticky-box {
   /* #ifndef APP-PLUS-NVUE */
   display: flex;
   position: -webkit-sticky;
   /* #endif */
   position: sticky;
   top: var(--window-top);
   z-index: 99;
   flex-direction: row;
   margin: 0px;
   padding: 15px 0 15px 0;
   white-space: nowrap;
   overflow-x: auto;
   background: #fff;
 }
 
 .ikz-sticky-title {
   box-sizing: border-box;
   padding: 0 20rpx;
   display: inline-block;
   text-align: center;
 }
 
 .ikz-textcenter {
   padding-bottom: 10rpx;
 }
 
 /* list */
 .ikz-sticky-item-box {
   overflow-x: auto;
 }
 
 .ikz-sticky-item {
   box-sizing: border-box;
   padding: 30rpx;
   width: 95%;
   margin: 0 auto 20rpx;
   background: #F9F9F9;
   border-radius: 15rpx;
 }
 
 .ikz-sticky-top {
   display: flex;
   align-items: center;
 }
 
 .ikz-sticky-img {
   width: 80rpx;
   height: 80rpx;
   border-radius: 50%;
 }
 
 .ikz-sticky-head-right {
   margin-left: 20rpx;
   width: 85%;
 }
 
 .ikz-sticky-head-right-box {
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: space-between;
   line-height: 50rpx;
 }
 
 .ikz-sticky-head-time {
   color: #888;
   font-size: 25rpx;
 }
 
 .ikz-sticky-head-card {
   background-color: #FDAF64;
   color: #fff;
   font-size: 23rpx;
   border-radius: 15rpx;
   padding: 0px 10rpx;
   text-align: center;
   line-height: 45rpx;
 
 }
 
 .ikz-sticky-head-price {
   color: #FDAF64;
 }
 
 .ikz-sticky-content {
   line-height: 45rpx;
   font-size: 30rpx;
   margin: 15rpx 0;
 }
 
 .ikz-sticky-head-name {
   font-size: 28rpx;
 }
 
 .ikz-sticky-start {
   display: flex;
   align-items: center;
   font-size: 28rpx;
   line-height: 50rpx;
 }
 
 .ikz-sticky-spot {
   width: 20rpx;
   height: 20rpx;
   border-radius: 50%;
   background-color: #76A8FD;
   margin-right: 20rpx;
 }
 
 .ikz-sticky-spot1 {
   width: 20rpx;
   height: 20rpx;
   border-radius: 50%;
   background-color: #FF8800;
   margin-right: 20rpx;
 }
 .ikz-sticky-spot2 {
   width: 20rpx;
   height: 20rpx;
   border-radius: 50%;
   background-color: #009423;
   margin-right: 20rpx;
 }
 
 .ikz-sticky-end {
   display: flex;
   align-items: center;
   justify-content: space-between;
 }
 .ikz-sticky-buttom{
   display: flex;
   align-items: center;
   justify-content: flex-end;
 }
 .ikz-sticky-btn {
   background: #FF6565;
   color: #fff;
   padding: 0 20rpx;
   border-radius: 15rpx;
   line-height: 50rpx;
   font-size: 26rpx;
   margin-left: 15rpx;
 }
 .ikz-sticky-btn1{
   background: #D54242;
   color: #fff;
   padding: 0 20rpx;
   border-radius: 15rpx;
   line-height: 50rpx;
   font-size: 26rpx;
   margin-left: 15rpx;
 }
 .ikz-sticky-btn2{
   background: #76A8FD;
   color: #fff;
   padding: 0 20rpx;
   border-radius: 15rpx;
   line-height: 50rpx;
   font-size: 26rpx;
   margin-left: 15rpx;
 }
 .ikz-sticky-btn4{
   background: #42D5BE;
   color: #fff;
   padding: 0 20rpx;
   border-radius: 15rpx;
   line-height: 50rpx;
   font-size: 26rpx;
   margin-left: 15rpx;
 }
 .ikz-sticky-btn3{
   background: #D6D6D6;
   color: #fff;
   padding: 0 20rpx;
   border-radius: 15rpx;
   line-height: 50rpx;
   font-size: 26rpx;
   margin-left: 15rpx;
 }
 .ikz-more{
   width:100%;
   text-align: center;
   line-height: 50rpx;
   color: #999999;
   padding-bottom: 25rpx;
   display: flex;
   align-items: center;
   justify-content: center;
 }
 .ikz-empty{
   width: 150rpx;
   height: 150rpx;
   margin-bottom: 20rpx;
   margin-top: 150rpx;
 }
</style>
